<template>
  <div id="fenxi_zhangdan_yue">
    <canvas
      id="fenxi_zhangdan_yue_container"
      style="width: 100%; height: 265px"
    ></canvas>
    <van-divider
      :style="{
        color: '#1989fa',
        borderColor: '#1989fa',
        padding: '0 16px',
      }"
    >
      分割线
    </van-divider>
    <table id="tab">
      <tbody>
        <tr>
          <td>近一月总消费</td>
          <td>{{ latelyMonthStatisticTotal }}元</td>
        </tr>
        <tr>
          <td>近一月平均消费</td>
          <td>{{ latelyMonthStatisticAvg }}元</td>
        </tr>
      </tbody>
    </table>
    <van-divider
      :style="{
        color: '#1989fa',
        borderColor: '#1989fa',
        padding: '0 16px',
      }"
    >
      分割线
    </van-divider>
  </div>
</template>
<script>
import F2 from "@antv/f2";
export default {
  name: "fenxi_zhangdan_yue",
  data() {
    return {
      data: {
        list: [],
      },
      latelyMonthStatisticTotal: 0,
      latelyMonthStatisticAvg: 0,
      // latelyYearStatisticTotal: 0,
      // latelyYearStatisticAvg: 0,
      // latelyWeekStatisticTotal: 0,
      // latelyWeekStatisticAvg: 0,
    };
  },
  props: {
    // 渲染
    xuanran: Boolean,
  },
  mounted() {
    if (this.xuanran) {
      this.init();
    }
  },
  watch: {
    xuanran: function (val) {
      this.init();
    },
  },
  methods: {
    init() {
      this.$api.get(
        "api1",
        "app/zhang-dan/month-zhi-chu-statistic?count=8",
        null,
        (r) => {
          this.data.list = r;
          const chart = new F2.Chart({
            id: "fenxi_zhangdan_yue_container",
            pixelRatio: window.devicePixelRatio,
          });

          chart.source(this.data.list, {
            sales: {
              tickCount: 6,
            },
          });
          chart.interval().position("month*price");
          chart.render();

          // 绘制柱状图文本
          const offset = -5;
          const canvas = chart.get("canvas");
          const group = canvas.addGroup();
          this.data.list.forEach(function (obj) {
            const point = chart.getPosition(obj);
            group.addShape("text", {
              attrs: {
                x: point.x,
                y: point.y + offset,
                text: obj.price,
                textAlign: "center",
                textBaseline: "bottom",
                fill: "#808080",
              },
            });
          });
        }
      );

      this.$api.get("api1", "app/zhang-dan/statistic-set", null, (r) => {
        console.log(r);
        this.latelyMonthStatisticTotal = r.latelyMonthStatisticTotal;
        this.latelyMonthStatisticAvg = r.latelyMonthStatisticAvg;
      });
    },
  },
};
</script>
<style lang="stylus" scoped>
#tab {
  width: 100%;
}
</style>
